import * as React from 'react';
import { Icon } from '../components/Icon';
import { Tag } from '../components/Tag';

export function Collapse({
  head,
  title,
  type,
  children,
  tagType,
  tagContent,
  tagShow,
  isOpen,
  arrowHide,
  borderHide
}) {
  const [isOpenState, setIsOpenState] = React.useState(isOpen);

  const toggleCollapse = () => {
    if (!arrowHide) {
      setIsOpenState((prevIsOpen) => !prevIsOpen); // 切换状态
    }
  };
  React.useEffect(() => {
    setIsOpenState(isOpen);
  }, [isOpen]);

  return (
    <div>
      <div className="head">{head}</div>
      <div className="borderTop">
        <div onClick={toggleCollapse} className="collapse">
          <Icon
            icon="arrow"
            color="var(--color-gray-7)"
            style={{
              width: '12px',
              height: '12px',
              transition: 'transform 0.2s ease',
              transform: isOpenState ? 'rotate(0deg)' : 'rotate(-90deg)',
              display: arrowHide ? 'none' : '',
            }}
          ></Icon>
          <span className="title">{title}</span>
          <span className="type">{type}</span>
          <Tag type={tagType} style={{ display: tagShow ? '' : 'none' }}>
            {tagContent}
          </Tag>
        </div>
        {isOpenState && <div className="content">{children}</div>}
      </div>
      <style jsx>
        {`
          .head {
            font-size: 16px;
            color: var(--color-gray-10);
            font-weight: bold;
            padding: 24px 0px 8px 0px;
            display: ${head ? '' : 'none'};
          }
          .borderTop {
            border-top: ${borderHide ? '' : '1px solid var(--color-gray-5)'};
            padding: 12px 0px;
          }
          .collapse {
            display: flex;
            gap: 8px;
            align-items: center;
          }
          .title {
            font-size: 14px;
            font-weight: 700;
            color: var(--color-gray-8);
          }
          .type {
            font-size: 12px;
            font-weight: 500;
            color: var(--color-gray-7);
          }
          .content {
            font-size: 0.9rem;
            line-height: 0.9rem;
            margin-top: 6px;
            color: var(--color-gray-8);
          }
        `}
      </style>
    </div>
  );
}
